<template>
    <div class="clear">
        <div class="title">
           <div class="open">
               <i class="el-icon-s-flag" ></i>
               <span>重庆百来码喷码机后台管理系统</span>
           </div>
            <div class="close">
                <span>欢迎admin |</span>
                <img src="../../assets/close.png" alt="" @click="close_img">
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "title",
        methods:{
            close_img(){
                window.sessionStorage.clear();
                this.$router.push("/login");
            }
        }
    }
</script>

<style lang="less" scoped>
    .title{
            /*width: 99%;*/
            box-shadow: 0 0 10px #cccccc;
            height: 50px;
            margin-left: 10px;

        .open{
            /*width: 80%;*/
            float: left;
            height: 50px;
            /*border: 1px solid #ffffff;*/
            /*border-bottom: 1px solid;*/
            background: white;
            display: flex;
            align-items: center;
            border-radius: 3px;
            i{
                font-size: 20px;
                margin-left: 7px;
            }
            span{
                margin-left: 5px;
            }
        }
        .close{
            float: right;
            height: 50px;
            position: relative;
            span{
                position: absolute;
                width: 100px;
                top: 50%;
                right: 40px;
                transform: translateY(-50%);
            }
            img {
                height: 30px;
                width: 30px;
                position: absolute;
                /*width: 100px;*/
                top: 50%;
                right: 20px;
                transform: translateY(-50%);
                cursor: pointer;

            }
        }
    }

    .clear:after{
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
</style>
